// 注册 MenuItem 组件，用于递归渲染菜单项
Vue.component('menu-item', {
    template: `
    <el-menu-item
      v-if="!item.children || item.children.length === 0"
      :key="item.index"
      :index="item.index"
      @click="handleClick"
      class="col-md-2 col menu-item"   
      style="padding-right: 0; max-width: 260px;"   
    >
      <i v-if="item.icon" :class="item.icon"></i> 
      {{ item.title }}
    </el-menu-item>
    <el-submenu v-else :index="item.index" @open="handleOpen" @close="handleClose" class="col-md-2 col menu-item" style="padding-right: 0; max-width: 260px;">
      <template slot="title">
        <i v-if="item.icon" :class="item.icon"></i>   
        {{ item.title }}
      </template>
      <menu-item v-for="child in item.children" :key="child.index" :item="child"></menu-item>
    </el-submenu>
  `,
    props: {
        item: {
            type: Object,
            required: true
        }
    },
    methods: {
        handleClick() {
            // 如果菜单项有 URL，则跳转
            if (this.item.url) {
                window.location.href = this.item.url;
            }
        },
        handleOpen() {
            // 处理子菜单打开事件
            console.log('Submenu opened');
        },
        handleClose() {
            // 处理子菜单关闭事件
            console.log('Submenu closed');
        }
    }
});

// 注册 MenuComponent 组件，用于渲染整个菜单
Vue.component('menu-component', {
    name: 'menu-component',
    template: `
    <el-menu 
      :default-active="defaultActive" 
      class="el-menu-vertical-demo col-md-2 col"   
      style="padding-right: 0; padding-left: 10px; max-width: 260px;  "   
      background-color="#304156"
      text-color="#fff"
      active-text-color="#ffd04b"
      theme="dark"
    >
     <el-menu-item index="0" style="height: 65px">
                <i class="el-icon-tickets"></i>
                <span slot="title" style="font-size: 17px">图书借阅管理系统</span>
                </el-menu-item>
      <menu-item v-for="item in menuData" :key="item.index" :item="item"></menu-item>
    </el-menu>
  `,
    data() {
        return {
            menuData: [
                {
                    title: '首页',
                    index: '1',
                    url: '/home',  // 这个菜单项跳转到 '/home'
                    icon: 'el-icon-house'
                },
                {
                    title: '图书管理',
                    index: '2',
                    icon: 'el-icon-goods',
                    children: [
                        {
                            title: '图书管理',
                            index: '2-1',
                            url: '/product-a',
                            icon: 'el-icon-android-phone'
                        },
                        {
                            title: '图书副本管理',
                            index: '2-2',
                            url: '/product-b',
                            icon: 'el-icon-android-phone'
                        }
                    ]
                },
                {
                    title: '读者管理',
                    index: '3',
                    icon: 'el-icon-goods',
                    url: '/reader',
                },
                {
                    title: '图书借阅',
                    index: '4',
                    icon: 'el-icon-goods',
                    url: '/borrow',
                },
                {
                    title: '系统管理',
                    index: '5',
                    icon: 'el-icon-goods',
                    children: [
                        {
                            title: '系统用户管理',
                            index: '2-1',
                            url: '/admin//system/user',
                            icon: 'el-icon-android-phone'
                        },
                        {
                            title: '服务器监控',
                            index: '2-2',
                            url: '/product-b',
                            icon: 'el-icon-android-phone'
                        }
                    ]
                },
                {
                    title: '联系我们',
                    index: '4',
                    url: '/contact',
                    icon: 'el-icon-phone'
                }
            ],
            defaultActive: '1',
            collapse: false
        };
    }
});
